<style scoped>
.articles-edit .in-carousel {
  width: 720px;
}
</style>
<!-- 对 divider 组件的编辑 -->
<template>
  <div class="articles-edit" v-if="dialogShow">
    <SettingDialog :title="name" :dialogVisible="dialogShow" :saveclose="saveclose" :save="save" :close="close"
      ref="settingComponentDialog" savecloseText="应用并关闭" saveText="应用">
      <div class="in-carousel">
        <el-carousel ref="elCarousel" :initial-index="initialIndex" :autoplay="false" :indicator-position="'none'"
          :arrow="'never'" height="480px">
          <el-carousel-item>
            <el-divider content-position="right">
              <el-button style="margin-right:12px;" @click="changeInitialIndex(1)" size="mini" type="text">返回
              </el-button> 选取文章系统
            </el-divider>
            <el-row style="width:720px;">
            </el-row>
          </el-carousel-item>
          <el-carousel-item>
            <el-divider content-position="center">设置</el-divider>
            <el-row style="width:720px;">
              <el-col :span="12">
                <el-button @click.stop="changeInitialIndex(0)" type="primary" size="mini" plain>选取系统 </el-button>
                <el-tooltip class="item" effect="dark" :content="quoteSystemInput" placement="bottom-start">
                  <el-input size="mini" style="width:260px;" :disabled="true" v-model="quoteSystemInput" maxlength="12">
                  </el-input>
                </el-tooltip>
              </el-col>
              <el-col :span="12">
                <el-tooltip class="item" effect="dark" :content="styleTypeInput" placement="bottom-start">
                  <el-input size="mini" style="width:260px;" :disabled="true" v-model="styleTypeInput" maxlength="12">
                  </el-input>
                </el-tooltip>
                <el-button @click.stop="changeInitialIndex(2)" type="primary" size="mini" plain>列表样式</el-button>
              </el-col>
            </el-row>
          </el-carousel-item>
          <el-carousel-item>
            <el-divider content-position="left">列表样式 <el-button style="margin-left:12px;" @click="changeInitialIndex(1)"
                size="mini" type="text">返回</el-button>
            </el-divider>
            <el-row style="width:720px;">
            </el-row>
          </el-carousel-item>
        </el-carousel>
      </div>
    </SettingDialog>
  </div>
</template>

<script>
import SettingDialog from '@/components/common/dialog/SettingDialog.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import { mapState } from 'vuex'
import PubSub from 'pubsub-js'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    quoteSystemInput () {
      return '选择的系统选择的系统选择的系统选择的系统选择的系统选择的系统选择的系统选择的系统选择的系统选择的系统选择的系统选择的系统'
    },
    styleTypeInput () {
      return ''
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTARTICLES, (component, componentType, callback) => {
      this.close()
      this.dialogShow = true
      this.name = component.name ? component.name : componentType.name
      this.component = component
      this.componentType = componentType
      this.data = component.udinData.data
      this.callback = callback
      // ....
      this.quoteSystem = component.quoteSystem

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
      this.close()
    })
    PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
      this.close()
    })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      name: '',
      component: null,
      componentType: null,
      data: null,
      initialIndex: 1,
      callback: () => { },
      // ...
      quoteSystem: {}
    }
  },
  watch: {
  },
  methods: {
    changeInitialIndex (index) {
      this.$refs['elCarousel'].setActiveItem(index)
    },
    // .............
    close () {
      this.dialogShow = false
      this.name = ''
      this.component = null
      this.componentType = null
      this.data = null
      this.initialIndex = 1
      this.callback = () => { }
      // ...
      this.quoteSystem = {}
    },
    saveclose () {
      this.save()
      this.$refs['settingComponentDialog'].close()
    },
    save () {
      this.callback(this.component.tempId, { data: this.data })
    }
  },
  components: {
    SettingDialog,
    TextAlign
  }
}

</script>
